*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
#warpper{
    display: grid;
    height: 100%;
    grid-template-columns: 100%;
    grid-template-rows: 10% 70% 20%;
}
.header{
    background-color: rgb(172, 244, 182);
}
.mainbox{
    background-color: rgb(255, 233, 117);
    display: grid;
    height: 100%;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 100%;
    .leftbar{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 30% 30% 40%;
        background-color: black;
        .panlebox{
            outline: 3px solid green;
            background-color: #fff;
        }
    }
    .rightbar{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 35% 35% 30%;
        background-color: black;
        .panlebox{
            outline: 3px solid green;
            background-color: #fff;
        }
    }
}
.footer{
    display: grid;
    grid-template-columns: 25% 15% 25% 20% 15%;
    grid-template-rows: 100%;
    background-color: rgb(253, 154, 92);
    .panlebox{
        outline: 3px solid green;
        background-color: #fff;
    }
}